import {
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  Platform,
} from "react-native";
import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router } from "expo-router";

const menuItems = [
  {
    title: "我的订单",
    items: [
      {
        icon: <Ionicons name="wallet" size={24} color="#666" />,
        text: "待付款",
      },
      { icon: <Ionicons name="cube" size={24} color="#666" />, text: "待发货" },
      {
        icon: <Ionicons name="bicycle" size={24} color="#666" />,
        text: "待收货",
      },
      { icon: <Ionicons name="star" size={24} color="#666" />, text: "待评价" },
      {
        icon: <Ionicons name="refresh" size={24} color="#666" />,
        text: "退货/售后",
      },
    ],
  },
  {
    title: "",
    items: [
      {
        icon: <Ionicons name="location" size={24} color="#666" />,
        text: "收货地址",
      },
      {
        icon: <Ionicons name="chatbox" size={24} color="#666" />,
        text: "我的评价",
      },
      {
        icon: <Ionicons name="heart" size={24} color="#666" />,
        text: "我的收藏",
      },
      {
        icon: <Ionicons name="people" size={24} color="#666" />,
        text: "邀请好友",
      },
      {
        icon: <Ionicons name="headset" size={24} color="#666" />,
        text: "官方客服",
      },
    ],
  },
  {
    title: "",
    items: [
      {
        icon: <MaterialIcons name="loyalty" size={24} color="#666" />,
        text: "我的积分",
      },
    ],
  },
];

// 1. 添加用户数据结构
interface UserProfile {
  id: string;
  nickname: string;
  avatar: string;
  level: number;
  points: number;
  coupons: number;
  following: number;
  followers: number;
}

// 2. 添加消息中心
const MessageCenter = () => {
  return (
    <View style={styles.messageCenter}>
      <TouchableOpacity style={styles.messageItem}>
        <Ionicons name="notifications" size={24} color="#666" />
        <ThemedText>系统通知</ThemedText>
        <View style={styles.badge}>
          <ThemedText>2</ThemedText>
        </View>
      </TouchableOpacity>
    </View>
  );
};

// 3. 添加设置选项
const settingsOptions = [
  { id: 1, title: "账号安全", icon: "shield-checkmark" },
  { id: 2, title: "隐私设置", icon: "lock-closed" },
  { id: 3, title: "通知设置", icon: "notifications" },
  { id: 4, title: "关于我们", icon: "information-circle" },
];

export default function ProfileScreen() {
  return (
    <SafeAreaView
      style={[
        styles.safeArea,
        // 安卓额外添加顶部内边距
        Platform.OS === "android" && { paddingTop: 25 },
      ]}
    >
      <ThemedView style={styles.container}>
        {/* 顶部工具栏 */}
        <View style={styles.header}>
          <View style={styles.headerLeft} />
          <View style={styles.headerRight}>
            <TouchableOpacity style={styles.iconButton}>
              <Ionicons name="settings" size={24} color="#666" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.iconButton}>
              <Ionicons name="chatbubbles" size={24} color="#666" />
            </TouchableOpacity>
          </View>
        </View>

        <ScrollView style={styles.scrollView}>
          {/* 用户信息 */}
          <TouchableOpacity
            style={styles.userInfo}
            onPress={() => {
              router.push("/login/login");
            }}
          >
            <Image
              source={{
                uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
              }}
              style={styles.avatar}
            />
            <ThemedText style={styles.username}>未登录</ThemedText>
            <ThemedText style={styles.arrow}>{">"}</ThemedText>
          </TouchableOpacity>

          {/* 会员信息 */}
          <View style={styles.memberInfo}>
            <TouchableOpacity style={styles.memberItem}>
              <ThemedText style={styles.memberTitle}>红包卡券</ThemedText>
              <ThemedText style={styles.memberSubtitle}>领券中心</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.memberItem}>
              <ThemedText style={styles.memberTitle}>黄金VIP</ThemedText>
              <ThemedText style={styles.memberSubtitle}>权益中心</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.memberItem}>
              <ThemedText style={styles.memberTitle}>红包到到</ThemedText>
              <ThemedText style={styles.memberSubtitle}>立即领取</ThemedText>
            </TouchableOpacity>
          </View>

          {/* 菜单列表 */}
          {menuItems.map((section, sectionIndex) => (
            <View key={sectionIndex} style={styles.menuSection}>
              {section.title && (
                <View style={styles.sectionHeader}>
                  <ThemedText style={styles.sectionTitle}>
                    {section.title}
                  </ThemedText>
                </View>
              )}
              <View style={styles.menuGrid}>
                {section.items.map((item, itemIndex) => (
                  <View key={itemIndex} style={styles.menuItem}>
                    {item.icon}
                    <ThemedText style={styles.menuText}>{item.text}</ThemedText>
                  </View>
                ))}
              </View>
            </View>
          ))}

          {/* Banner */}
          <View style={styles.banner}>
            <ThemedText>BANNER</ThemedText>
          </View>

          {/* 推荐商品 */}
          <View style={styles.recommendSection}>
            <View style={styles.recommendHeader}>
              <ThemedText style={styles.recommendTitle}>
                你可能还喜欢
              </ThemedText>
            </View>
            <View style={styles.recommendGrid}>
              {[1, 2].map((item) => (
                <View key={item} style={styles.recommendItem}>
                  <Image
                    source={{
                      uri: "https://tse2-mm.cn.bing.net/th/id/OIP-C.jdP04yEoxG10mcywseQj7gAAAA?rs=1&pid=ImgDetMain",
                    }}
                    style={styles.recommendImage}
                  />
                </View>
              ))}
            </View>
          </View>
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  scrollView: {
    flex: 1,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 15,
  },
  headerLeft: {
    flex: 1,
  },
  headerRight: {
    flexDirection: "row",
    gap: 15,
  },
  iconButton: {
    padding: 5,
  },
  userInfo: {
    flexDirection: "row",
    alignItems: "center",
    padding: 20,
    backgroundColor: "white",
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 15,
  },
  username: {
    fontSize: 18,
    flex: 1,
    color: Colors.text.primary,
  },
  arrow: {
    color: Colors.text.tertiary,
    fontSize: 16,
  },
  memberInfo: {
    flexDirection: "row",
    backgroundColor: "white",
    paddingVertical: 15,
    marginBottom: 10,
  },
  memberItem: {
    flex: 1,
    alignItems: "center",
  },
  memberTitle: {
    fontSize: 16,
    marginBottom: 5,
    color: Colors.text.primary,
  },
  memberSubtitle: {
    fontSize: 12,
    color: Colors.text.tertiary,
  },
  menuSection: {
    backgroundColor: "white",
    marginBottom: 10,
  },
  sectionHeader: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: Colors.text.primary,
  },
  menuGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 10,
  },
  menuItem: {
    width: "20%",
    alignItems: "center",
    paddingVertical: 15,
  },
  menuIcon: {
    fontSize: 24,
    marginBottom: 8,
  },
  menuText: {
    fontSize: 12,
    color: Colors.text.secondary,
  },
  banner: {
    height: 100,
    backgroundColor: "#f0f0f0",
    margin: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  recommendSection: {
    backgroundColor: "white",
    paddingBottom: 20,
  },
  recommendHeader: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#f0f0f0",
  },
  recommendTitle: {
    fontSize: 16,
    textAlign: "center",
    color: Colors.text.secondary,
  },
  recommendGrid: {
    flexDirection: "row",
    padding: 10,
    gap: 10,
  },
  recommendItem: {
    flex: 1,
    aspectRatio: 1,
    backgroundColor: "#f5f5f5",
    borderRadius: 8,
    overflow: "hidden",
  },
  recommendImage: {
    width: "100%",
    height: "100%",
  },
  messageCenter: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 10,
    backgroundColor: "white",
  },
  messageItem: {
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
    backgroundColor: "#f5f5f5",
    borderRadius: 8,
  },
  badge: {
    backgroundColor: Colors.primary,
    borderRadius: 8,
    padding: 2,
    marginLeft: 5,
  },
});
